//创建展示图形函数
function createGraph (t, f) {
    var div = document.createElement('div');
    div.className = 'itemBox';

    var canvas = document.createElement('canvas');
    canvas.width = 200;
    canvas.height = 100;
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = 'rgb(250, 250, 250)';
    ctx.fillRect(0, 0, 200, 100);

    ctx.strokeStyle = 'rgb(230, 230, 230)';
    ctx.lineWidth = .5;

    ctx.beginPath();
    ctx.moveTo(0, 20);
    ctx.lineTo(180, 20);
    ctx.moveTo(0, 80);
    ctx.lineTo(180, 80);
    ctx.closePath();
    ctx.stroke();

    ctx.strokeStyle = 'rgb(255, 127, 127)';
    ctx.lineWidth = 2;

    var postion = { x: 5, y: 80 };
    var postion_old = { x: 5, y: 80 };

    new TWEEN.Tween(postion).to({ x: 195 }, 2000).easing(TWEEN.Easing.Linear.None).start();
    new TWEEN.Tween(postion).to({ y: 20 }, 2000).easing(f).onUpdate(function(obj) {
        ctx.beginPath();
        ctx.moveTo(postion_old.x, postion_old.y);
        ctx.lineTo(postion.x, postion.y);
        ctx.closePath();
        ctx.stroke();

        postion_old.x = postion.x;
        postion_old.y = postion.y;
    }).start();

    div.appendChild( document.createTextNode(t) );
    div.appendChild( canvas );
    return div;
}

//初始化
function init() {
    var target = document.getElementById('target');
    target.appendChild( createGraph('Linear.None', TWEEN.Easing.Linear.None) );

    target.appendChild(document.createElement('br'));

    //二次方缓动函数
    target.appendChild( createGraph( 'Quadratic.In', TWEEN.Easing.Quadratic.In ) );
    target.appendChild( createGraph( 'Quadratic.Out', TWEEN.Easing.Quadratic.Out ) );
    target.appendChild( createGraph( 'Quadratic.InOut', TWEEN.Easing.Quadratic.InOut ) );
    //三次方缓动
    target.appendChild( createGraph( 'Cubic.In', TWEEN.Easing.Cubic.In ) );
    target.appendChild( createGraph( 'Cubic.Out', TWEEN.Easing.Cubic.Out ) );
    target.appendChild( createGraph( 'Cubic.InOut', TWEEN.Easing.Cubic.InOut ) );

    target.appendChild( document.createElement( 'br' ) );

    //四次方缓动
    target.appendChild( createGraph( 'Quartic.In', TWEEN.Easing.Quartic.In ) );
    target.appendChild( createGraph( 'Quartic.Out', TWEEN.Easing.Quartic.Out ) );
    target.appendChild( createGraph( 'Quartic.InOut', TWEEN.Easing.Quartic.InOut ) );
    //五次方缓动
    target.appendChild( createGraph( 'Quintic.In', TWEEN.Easing.Quintic.In ) );
    target.appendChild( createGraph( 'Quintic.Out', TWEEN.Easing.Quintic.Out ) );
    target.appendChild( createGraph( 'Quintic.InOut', TWEEN.Easing.Quintic.InOut ) );

    target.appendChild( document.createElement( 'br' ) );

    //正弦曲线缓动
    target.appendChild( createGraph( 'Sinusoidal.In', TWEEN.Easing.Sinusoidal.In ) );
    target.appendChild( createGraph( 'Sinusoidal.Out', TWEEN.Easing.Sinusoidal.Out ) );
    target.appendChild( createGraph( 'Sinusoidal.InOut', TWEEN.Easing.Sinusoidal.InOut ) );
    //指数曲线缓动
    target.appendChild( createGraph( 'Exponential.In', TWEEN.Easing.Exponential.In ) );
    target.appendChild( createGraph( 'Exponential.Out', TWEEN.Easing.Exponential.Out ) );
    target.appendChild( createGraph( 'Exponential.InOut', TWEEN.Easing.Exponential.InOut ) );

    target.appendChild( document.createElement( 'br' ) );

    //环形曲线缓动
    target.appendChild( createGraph( 'Circular.In', TWEEN.Easing.Circular.In ) );
    target.appendChild( createGraph( 'Circular.Out', TWEEN.Easing.Circular.Out ) );
    target.appendChild( createGraph( 'Circular.InOut', TWEEN.Easing.Circular.InOut ) );
    //指数衰减正弦曲线缓动
    target.appendChild( createGraph( 'Elastic.In', TWEEN.Easing.Elastic.In ) );
    target.appendChild( createGraph( 'Elastic.Out', TWEEN.Easing.Elastic.Out ) );
    target.appendChild( createGraph( 'Elastic.InOut', TWEEN.Easing.Elastic.InOut ) );

    target.appendChild( document.createElement( 'br' ) );

    //超范围的三次方缓动
    target.appendChild( createGraph( 'Back.In', TWEEN.Easing.Back.In ) );
    target.appendChild( createGraph( 'Back.Out', TWEEN.Easing.Back.Out ) );
    target.appendChild( createGraph( 'Back.InOut', TWEEN.Easing.Back.InOut ) );
    //指数衰减反弹曲线缓动
    target.appendChild( createGraph( 'Bounce.In', TWEEN.Easing.Bounce.In ) );
    target.appendChild( createGraph( 'Bounce.Out', TWEEN.Easing.Bounce.Out ) );
    target.appendChild( createGraph( 'Bounce.InOut', TWEEN.Easing.Bounce.InOut ) );
}

//动画函数
function animate(time) {
    requestAnimationFrame(animate);

    TWEEN.update(time);
}

init();
animate();